<script setup lang="ts">
import axios from "axios";
import {ElNotification} from "element-plus";
import {ref, toRaw} from "vue";
import {ServerHost} from "@/main.ts";
import {downloadImg} from "@/utils";
import dayjs from "dayjs";

// 轮播图
const carouselImgList = ref([
  // {id: uuidv4(), status: imgStatus.onLocal, rawFile: UploadRawFile, url: ""},
])

const isCarouselImgListLoading = ref(true)

axios.get(`${ServerHost}/getIndexCarouselList`)
    .then(res => {
      isCarouselImgListLoading.value = false
      if (res.status === 200) {
        console.log("轮播图获取成功，共", res.data.length, "张")
        carouselImgList.value = res.data
      } else {
        ElNotification({
          title: '轮播图获取失败',
          type: 'error',
          position: 'bottom-right',
        })
      }
    })

// 政策
const policyNList = ref([])
const policyNum = ref(6)
axios.get(`${ServerHost}/getPolicyList?key=`)
    .then(res => {
      if (res.status === 200) {
        // 随机选取n条政策
        const policyList = res.data
        if (policyList.length < policyNum.value) {
          policyNList.value = policyList
        } else {
          policyNList.value = []
          for (let i = 0; i < policyNum.value; i++) {
            const randomIndex = Math.floor(Math.random() * policyList.length)
            policyNList.value.push(policyList[randomIndex])
            policyList.splice(randomIndex, 1)
          }
          console.log(policyNList.value)
          // 下载封面
          policyNList.value.forEach((policy, i) => {
            downloadImg(policyNList.value[i].coverImg, "PolicyCover/")
                .then(res => {
                  if (res.status === 200) {
                    const type = 'image/png'
                    const blob = new Blob([res.data], {type: type})
                    const imgFile = new File([blob], policyNList.value[i].coverImg, {type: type})
                    policyNList.value[i].coverImgUrl = URL.createObjectURL(imgFile)
                  }
                })
          })
        }
      }
    })

// 农产品
const goodsList = ref([])
const goodsNList = ref([])
const goodsNum = ref(6)
axios.get(ServerHost + '/getGoodsList')
    .then(res => {
      if (res.status === 200) {
        goodsList.value = res.data
        if (goodsList.value.length < goodsNum.value) {
          goodsNList.value = goodsList.value
        } else {
          goodsNList.value = []
          for (let i = 0; i < goodsNum.value; i++) {
            const randomIndex = Math.floor(Math.random() * goodsList.value.length)
            goodsNList.value.push(goodsList.value[randomIndex])
            goodsList.value.splice(randomIndex, 1)

          }
          console.log(goodsNList.value)

          //   加载图片
          goodsNList.value.forEach(goods => {
            downloadImg(goods.img, "goodsImg/")
                .then(res => {
                  if (res.status === 200) {
                    // 获取图片类型
                    const type = goods.img.split('.')[1]
                    let mime: string
                    if ((['jpg', 'jpeg'] as any).includes('jpg'))
                      mime = 'image/jpeg'
                    else
                      mime = `image/${type}`
                    const blob = new Blob([res.data], {type: mime})
                    const imgFile = new File([blob], goods.img, {type: mime})
                    goods.imgUrl = URL.createObjectURL(imgFile)
                    console.log(goods)
                  }
                })
          })
        }
      }
    })


</script>

<template>
  <div class="flex flex-col w-full m-auto">
    <!-- 轮播图 -->
    <el-carousel
        height="300px"
        class="carousel w-full"
        indicator-position="outside"
        v-loading="isCarouselImgListLoading">
      <el-carousel-item v-for="img in carouselImgList" :key="img.id">
        <a class="img-div" :href="img.url" type="_blank">
          <img class="carousel-img" :src="img.imgData" alt="carousel-img">
        </a>
      </el-carousel-item>
    </el-carousel>

    <div class="flex m-auto">
      <!--  政策  -->
      <div class="policy-list">
        <div class="policy-item" v-for="policy in policyNList">
          <router-link class="h-full" :to="'/Policy/' + policy.id" target="_blank">
            <el-card class="h-full">
              <div class="flex justify-between gap-2">
                <div class="flex flex-col justify-between">
                  <p class="policy-title">{{ policy.title }}</p>
                  <p class="policy-time">{{ dayjs(policy.postTime).format('YY/MM/DD HH:mm') }}</p>
                </div>
                <img class="policy-img" :src="policy.coverImgUrl" alt="image">
              </div>
            </el-card>
          </router-link>
        </div>
      </div>
      <!--  农产品  -->
      <el-scrollbar height="440px">
        <div class="flex flex-col gap-2 ml-2 w-72">
          <div class="goods-item" v-for="goods in goodsNList">
            <router-link class="h-full" :to="'/Policy/' + goods.id" target="_blank">
              <el-card class="h-full">
                <div class="flex justify-between gap-2">
                  <div class="flex flex-col justify-between">
                    <p class="policy-title">{{ goods.name }}</p>
                    <p class="policy-time"> 已售 {{ goods.sales }}</p>
                  </div>
                  <img class="goods-img" :src="goods.imgUrl" alt="image">
                </div>
              </el-card>
            </router-link>
          </div>
        </div>
      </el-scrollbar>

    </div>

  </div>

</template>

<style scoped lang="scss">
.img-div {
  height: 300px;
}

.carousel-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.policy-list {
  width: 800px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(3, 140px);
  grid-gap: 10px;
  place-self: center;
}

.goods-list {
  width: 400px;
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-template-rows: repeat(3, 80px);
  grid-gap: 10px;
  place-self: center;
}

.policy-list {
  width: 800px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(3, 140px);
  grid-gap: 10px;
  place-self: center;
}


.policy-img {
  height: 100px;
  aspect-ratio: 16/9;
  border-radius: 2px;
}

.goods-img {
  height: 60px;
  aspect-ratio: 16/9;
  border-radius: 2px;
}

.policy-title {
  font-weight: bold;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;

}

.policy-time {
  color: var(--el-color-info);
  font-size: 0.9rem;
}
</style>
